<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">

		<h:form>
			<p:growl></p:growl>
			<h:outputText value="Travel Reimbursement Details" styleClass="outputTextTitle" />

			<h:panelGrid id="printPage">
				<h:outputText value="Employee Details" styleClass="outputTextSubTitle" />
				<p:panel style="font-weight: .2em; " styleClass="wam-ui-panel" >
				<h:panelGrid columns="6" cellspacing="8"
					columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText, employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">
					<h:outputLabel value="#{msg['employeename.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewOrPrintTravelReimbursementBean.employee.firstName} #{viewOrPrintTravelReimbursementBean.employee.lastName}" />

					<h:outputLabel value="Employee Code" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewOrPrintTravelReimbursementBean.employee.employeeCode}" />

					<h:outputLabel value="#{msg['dept.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewOrPrintTravelReimbursementBean.employee.moduleName}" />

					<h:outputLabel value="#{msg['designation.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewOrPrintTravelReimbursementBean.employee.designation}" />

					<h:outputLabel value="#{msg['requestdate.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewOrPrintTravelReimbursementBean.travelExpense.requestDate}">
						<f:convertDateTime pattern="dd-MMM-yyyy HH:mm a"
							timeZone="#{viewOrPrintTravelReimbursementBean.timeZone}" />
					</h:outputLabel>

					<h:outputLabel value="#{msg['place.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewOrPrintTravelReimbursementBean.employee.location}" />

					<h:outputLabel value="#{msg['contactno.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewOrPrintTravelReimbursementBean.employee.telephone}" />

					<h:outputLabel value="#{msg['emergenceycontactnum.label']}" />
					<h:outputLabel value=":" />
					<h:outputLabel
						value="#{viewOrPrintTravelReimbursementBean.employee.telephone}" />

				</h:panelGrid>
				</p:panel>
				<h:outputText value="Travel Details" styleClass="outputTextSubTitle" />
				<p:panel styleClass="wam-ui-panel">
					<h:panelGrid columns="6" cellspacing="8"
						columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText, employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">
						<h:outputLabel value="Expense Code" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{viewOrPrintTravelReimbursementBean.travelExpense.travelExpenseCode}"
							style="font-weight: bold;" />
	
						<h:outputLabel value="Purpose of Travel" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{viewOrPrintTravelReimbursementBean.travelRequest.natureOfWork}" />
	
						<h:outputLabel value="Travel From " />
						<h:outputLabel value=":" />
						<h:panelGroup>
							<h:outputText
								value="#{viewOrPrintTravelReimbursementBean.travelRequest.travelFrom_DO}"
								rendered="#{viewOrPrintTravelReimbursementBean.travelRequest.travelType eq 'DOMESTIC'}" />
							<h:outputText
								value="#{viewOrPrintTravelReimbursementBean.travelRequest.travelFrom_OS}"
								rendered="#{viewOrPrintTravelReimbursementBean.travelRequest.travelType eq 'OVERSEAS'}" />
							<h:outputText
								value="#{viewOrPrintTravelReimbursementBean.travelRequest.travelFrom_DO}"
								rendered="#{viewOrPrintTravelReimbursementBean.travelRequest.travelType eq 'BOTH DOMESTIC AND OVERSEAS'}" />
						</h:panelGroup>
	
						<h:outputLabel value="Travel To " />
						<h:outputLabel value=":" />
						<h:panelGroup>
							<h:outputText
								value="#{viewOrPrintTravelReimbursementBean.travelRequest.travelTo_DO}"
								rendered="#{viewOrPrintTravelReimbursementBean.travelRequest.travelType eq 'DOMESTIC'}" />
							<h:outputText
								value="#{viewOrPrintTravelReimbursementBean.travelRequest.travelTo_OS}"
								rendered="#{viewOrPrintTravelReimbursementBean.travelRequest.travelType eq 'OVERSEAS'}" />
							<h:outputText
								value="#{viewOrPrintTravelReimbursementBean.travelRequest.travelTo_OS}"
								rendered="#{viewOrPrintTravelReimbursementBean.travelRequest.travelType eq 'BOTH DOMESTIC AND OVERSEAS'}" />
						</h:panelGroup>
	
						<h:outputLabel value="From Date" />
						<h:outputLabel value=":" />
						<h:outputText
							value="#{viewOrPrintTravelReimbursementBean.travelRequest.periodFrom}">
							<f:convertDateTime pattern="dd-MMM-yyyy"
								timeZone="#{viewOrPrintTravelReimbursementBean.timeZone}" />
						</h:outputText>
	
						<h:outputLabel value="To date" />
						<h:outputLabel value=":" />
						<h:outputText
							value="#{viewOrPrintTravelReimbursementBean.travelRequest.periodTo}">
							<f:convertDateTime pattern="dd-MMM-yyyy"
								timeZone="#{viewOrPrintTravelReimbursementBean.timeZone}" />
						</h:outputText>
	
						<h:outputLabel value="Client Name" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{viewOrPrintTravelReimbursementBean.travelRequest.client}" />
	
						<h:outputLabel value="Location" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{viewOrPrintTravelReimbursementBean.travelRequest.clientLocation}" />
	
						<h:outputLabel value="Recommended By" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{viewOrPrintTravelReimbursementBean.travelRequest.approver.firstName} #{viewOrPrintTravelReimbursementBean.travelRequest.approver.lastName}" />
	
						<h:outputLabel value="Approved By" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{viewOrPrintTravelReimbursementBean.employeeVP.firstName} #{viewOrPrintTravelReimbursementBean.employeeVP.lastName}" />
	
					</h:panelGrid>
				</p:panel>
				
				<h:outputText value="Expense Details" styleClass="outputTextSubTitle" />				
				<p:panel styleClass="wam-ui-panel">
										<h:panelGrid style="width: 100%">
						<h:outputText value="Transportation Expenses"
							rendered="#{viewOrPrintTravelReimbursementBean.transportExpensesDetailsList.size() ne 0}"
							styleClass="outputTextPanelSubTitle" />
						<p:dataTable id="transportExpenses"
							rendered="#{viewOrPrintTravelReimbursementBean.transportExpensesDetailsList.size() ne 0}"
							value="#{viewOrPrintTravelReimbursementBean.transportExpensesDetailsList}"
							var="transportDetails"
							>

							<p:column headerText="#{msg['date.label']}" style="width: 80px;">
								<h:outputText value="#{transportDetails.transportDate}">
									<f:convertDateTime pattern="dd-MMM-yyyy"
										timeZone="#{viewOrPrintTravelReimbursementBean.timeZone}" />
								</h:outputText>
							</p:column>

							<p:column headerText="Source - Destination">
								<h:outputText
									value="#{transportDetails.transportFrom} - #{transportDetails.transportTo} (By #{transportDetails.transportMode})" />
							</p:column>
							<p:column headerText="Amount"
								style="width: 80px; text-align:right">
								<h:outputText value="#{transportDetails.transportAmount}" />
							</p:column>

							<p:column headerText="Currency" style="width: 30px">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{transportDetails.transportCurrency}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu value="#{transportDetails.transportCurrency}"
											style="width: 136px;">
											<f:selectItems 
												value="#{viewOrPrintTravelReimbursementBean.currencyMap}" /> 
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>


							<p:column headerText="Bill Attached" style="width: 60px">
								<h:outputText value="#{transportDetails.transportBillAttached}" />
							</p:column>

							
						</p:dataTable>




						<h:outputText value="Lodging Expenses"
							rendered="#{viewOrPrintTravelReimbursementBean.lodgingExpenseDetailsList.size() ne 0}"
							styleClass="outputTextPanelSubTitle" />
						<p:dataTable id="lodgingExpenses"
							rendered="#{viewOrPrintTravelReimbursementBean.lodgingExpenseDetailsList.size() ne 0}"
							value="#{viewOrPrintTravelReimbursementBean.lodgingExpenseDetailsList}"
							var="lodgingExpenses"
								>

							<p:column headerText="#{msg['date.label']}" style="width: 80px;">
								<h:outputText value="#{lodgingExpenses.lodgingDate}">
									<f:convertDateTime pattern="dd-MMM-yyyy"
										timeZone="#{viewOrPrintTravelReimbursementBean.timeZone}" />
								</h:outputText>

							</p:column>

							<p:column headerText="Hotel">
								<h:outputText
									value="#{lodgingExpenses.lodgingHotel}, #{lodgingExpenses.lodgingPlace}" />

							</p:column>


							<p:column headerText="Amount"
								style="width: 80px; text-align: right;">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{lodgingExpenses.lodgingAmount}"
											maxlength="5" />
									</f:facet>
									<f:facet name="input">
										<p:inputText value="#{lodgingExpenses.lodgingAmount}" size="7"
											maxlength="5" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column headerText="Currency" style="width: 30px">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{lodgingExpenses.lodgingCurrency}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu value="#{lodgingExpenses.lodgingCurrency}"
											style="width: 136px;">
											<f:selectItems
												value="#{viewOrPrintTravelReimbursementBean.currencyMap}" />
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>


							<p:column headerText="Bill Attached" style="width: 60px">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{lodgingExpenses.lodgingBillAttached}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu
											value="#{lodgingExpenses.lodgingBillAttached}">
											<f:selectItem itemLabel="Yes" itemValue="Yes" />
											<f:selectItem itemLabel="No" itemValue="No" />
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>

							<!-- <p:column headerText="EDIT" style="width:50px">  
			            <p:rowEditor />  
			        </p:column>   -->


						</p:dataTable>



						<h:outputText value="Boarding Expenses"
							rendered="#{viewOrPrintTravelReimbursementBean.boardingExpenseDetailsList.size() ne 0}"
							styleClass="outputTextPanelSubTitle" />
						<p:dataTable id="boardingExpenses"
							rendered="#{viewOrPrintTravelReimbursementBean.boardingExpenseDetailsList.size() ne 0}"
							value="#{viewOrPrintTravelReimbursementBean.boardingExpenseDetailsList}"
							var="boardingExpense"
							>

							<p:column headerText="#{msg['date.label']}" style="width: 80px">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{boardingExpense.boardingDate}">
											<f:convertDateTime pattern="dd-MMM-yyyy"
												timeZone="#{viewOrPrintTravelReimbursementBean.timeZone}" />
										</h:outputText>
									</f:facet>
									<f:facet name="input">
										<p:calendar value="#{boardingExpense.boardingDate}" size="9" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column headerText="Hotel">
								<h:outputText
									value="#{boardingExpense.boardingHotel}, #{boardingExpense.boardingPlace}" />
							</p:column>

							<p:column headerText="Amount"
								style="width: 80px; text-align: right">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{boardingExpense.boardingAmount}"
											maxlength="5" />
									</f:facet>
									<f:facet name="input">
										<p:inputText value="#{boardingExpense.boardingAmount}"
											size="7" maxlength="5" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column headerText="Currency" style="width: 30px">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{boardingExpense.boardingCurrency}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu value="#{boardingExpense.boardingCurrency}"
											style="width: 136px;">
											<f:selectItems
												value="#{viewOrPrintTravelReimbursementBean.currencyMap}" />
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>

							<!--  <p:column headerText="Amount(INR)"> 		                
		                <p:cellEditor>  	
			                <f:facet name="output"> 			                	
		              		 	<h:outputText value="#{boardingExpense.boardingAmountINR}" maxlength="5"/>
			                </f:facet>  
			                <f:facet name="input">  
			                	<p:inputText value="#{boardingExpense.boardingAmountINR}" size="7" maxlength="5"/>  
			                </f:facet>  
					   </p:cellEditor>  
		            </p:column>   -->

							<p:column headerText="Bill Attached" style="width: 60px;">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{boardingExpense.boardingBillAttached}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu
											value="#{boardingExpense.boardingBillAttached}">
											<f:selectItem itemLabel="Yes" itemValue="Yes" />
											<f:selectItem itemLabel="No" itemValue="No" />
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>

						</p:dataTable>

						<h:outputText value="Perdiem/Incidental/Miscellaneous Expenses"
							rendered="#{viewOrPrintTravelReimbursementBean.travelMiscExpenseDetailsList.size() ne 0}"
							styleClass="outputTextPanelSubTitle" />
						<p:dataTable id="miscExpenses"
							rendered="#{viewOrPrintTravelReimbursementBean.travelMiscExpenseDetailsList.size() ne 0}"
							value="#{viewOrPrintTravelReimbursementBean.travelMiscExpenseDetailsList}"
							var="travelMiscExpense">

							<p:column headerText="#{msg['date.label']}" style="width: 80px;">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{travelMiscExpense.expenseDate}">
											<f:convertDateTime pattern="dd-MMM-yyyy"
												timeZone="#{viewOrPrintTravelReimbursementBean.timeZone}" />
										</h:outputText>
									</f:facet>
									<f:facet name="input">
										<p:calendar value="#{travelMiscExpense.expenseDate}" size="9" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column headerText="Bill Description">
								<h:outputText
									value="#{travelMiscExpense.billNo} - #{travelMiscExpense.billDesc}" />
							</p:column>
							<p:column headerText="Amount"
								style="width: 80px; text-align: right">
								<h:outputText
									value="#{travelMiscExpense.travelMiscExpenseAmount}" />
							</p:column>

							<p:column headerText="Currency" style="width: 30px">
								<h:outputText
									value="#{travelMiscExpense.travelMiscExpensecurrency}" />
							</p:column>

							<p:column headerText="Bill Attached" style="width: 60px;">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{travelMiscExpense.billAttached}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu value="#{travelMiscExpense.billAttached}">
											<f:selectItem itemLabel="Yes" itemValue="Yes" />
											<f:selectItem itemLabel="No" itemValue="No" />
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>

						</p:dataTable>

						<h:outputText value="Expenses report summary total"
							styleClass="outputTextPanelSubTitle" style="float: right" />

						<p:dataGrid value="#{viewOrPrintTravelReimbursementBean.currencies}"
							style="" emptyMessage="00.00" var="currency" columns="1">
							<p:column style="">
								<h:panelGrid
									columnClasses="gridCellBottomRightAligned, currencyGridCell40px"
									columns="2" style="width: 400px; float: right;">
									<h:outputText value="#{currency.amount}"
										style="font-weight: bold; font-size: 1.4em;">
										<f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
									</h:outputText>
									<h:outputText value="#{currency.currency}"
										style="font-size: 1.4em;">
										<f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
									</h:outputText>
								</h:panelGrid>

							</p:column>

						</p:dataGrid>
					
					</h:panelGrid>
					
									<h:panelGrid columns="4" columnClasses="amountHeaderGridCell,amountHeaderGridCell,amountHeaderGridCell,amountHeaderGridCell" style="width: 100%">
						
						<h:outputText value="Eligibility as per policy" />
						
						<h:panelGroup>						
							<h:outputText value="Advance taken" />							 
						</h:panelGroup>
						
						<h:panelGroup>
							<h:outputText value="Approval total" />
						</h:panelGroup>
						<h:outputText value="Balance (Payable/Recievable)" />
					</h:panelGrid>
						<h:panelGrid columns="4"
							columnClasses="amountGridCell, amountGridCell, amountGridCell, amountGridCell"
							style="width: 100%; margin-top: -4px">
 

								<p:dataGrid columns="1" style="" emptyMessage=""
									value="#{viewOrPrintTravelReimbursementBean.policyAmounts}" 
									var="currency">
									<p:column>
										<h:panelGrid columns="3"
											style="float: right; margin-right: -5px;"
											columnClasses="gridCellBottomRightAligned, currencyGridCell, buttonGridCell">
											<h:outputText value="#{currency.amount}">
												<f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
											</h:outputText>
											<h:outputText value="#{currency.currency}" />

										</h:panelGrid>
									</p:column>
								</p:dataGrid>



							<h:panelGrid style="width: 100%">
								<p:dataGrid columns="1" style="" emptyMessage=""
									value="#{viewOrPrintTravelReimbursementBean.advanceTakenAmounts}"
									var="currency">
									<p:column>
										<h:panelGrid columns="3" style="float: right;"
											columnClasses="gridCellBottomRightAligned, currencyGridCell, buttonGridCell">
											<h:outputText value="#{currency.amount}">
												<f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
											</h:outputText>
											<h:outputText value="#{currency.currency}" />
										</h:panelGrid>
									</p:column>
								</p:dataGrid>
								
								
							</h:panelGrid>

								<p:dataGrid columns="1" emptyMessage=""
									value="#{viewOrPrintTravelReimbursementBean.approvalAmounts}"
									var="currency">
									<p:column>
										<h:panelGrid columns="3"
											style="float: right; margin-right: -5px;"
											columnClasses="gridCellBottomRightAligned, currencyGridCell, buttonGridCell">
											<h:outputText value="#{currency.amount}">
												<f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
											</h:outputText>
											<h:outputText value="#{currency.currency}" />

										</h:panelGrid>
									</p:column>
								</p:dataGrid>

							<p:dataGrid columns="1" style="" emptyMessage=""
								value="#{viewOrPrintTravelReimbursementBean.balanceAmounts}"
								var="currency">
								<p:column>
									<h:panelGrid columns="3"
										style="float: right; margin-right: -5px; "
										columnClasses="gridCellBottomRightAligned, currencyGridCell, buttonGridCell">
										<h:outputText value="#{currency.amount}">
											<f:convertNumber maxFractionDigits="2" minFractionDigits="2" />
										</h:outputText>
										<h:outputText value="#{currency.currency}" />
									</h:panelGrid>
								</p:column>
							</p:dataGrid>
						</h:panelGrid>




					
					
										<h:panelGrid cellspacing="7">
						<h:panelGroup>
							<h:outputText value="Recommender Comments :"
								style="font-weight:bold;" />
							<font face="comic sans MS, new york, times" size="2"><b>
									#{viewOrPrintTravelReimbursementBean.travelExpense.recommenderComments}</b></font>
						</h:panelGroup>
						<h:outputText
							value="Approver Status : #{viewOrPrintTravelReimbursementBean.travelExpense.approverStatus}"
							style="font-weight:bold;" />
						<h:panelGroup>
							<h:outputText value="Approver Comments :"
								style="font-weight:bold;" />
							<font face="comic sans MS, new york, times" size="2"><b>
									#{viewOrPrintTravelReimbursementBean.travelExpense.approvalComments}</b></font>
						</h:panelGroup>
					</h:panelGrid>					
				</p:panel>











			</h:panelGrid>
			<h:panelGroup style="float:right;">
				<p:commandButton value="Print" type="button" icon="ui-icon-print">
					<p:printer target="printPage" />
				</p:commandButton>
				<p:commandButton value="Back" onclick="history.back();" />
			</h:panelGroup>


		</h:form>
	</ui:define>
</ui:composition>